<template>
  <div>
    <a-button type="primary" @click="add">新增</a-button>
    <!-- 头部 -->
    <div class="fl" style="margin-top: 15px">
      <a-table
        :columns="serviceColums"
        :data-source="serviceList"
        style="width: 200px"
        :pagination="false"
      >
        <template #service="{ record, index }">
          <div class="service">
            <div
              class="name"
              :class="index == serviceAct ? 'name-act' : ''"
              @click="getChildrenList(record, index)"
            >
              {{ record.name }}
            </div>
          </div>
        </template>
      </a-table>
      <!-- 列表 -->
      <a-table
        style="flex: 1"
        :columns="columns"
        :data-source="list"
        bordered
        :loading="loading"
        @change="handleTableChange"
        :pagination="pagination"
        :scroll="{ y: 540, x: 'auto' }"
      >
        <template #pictureUrl="{ record }">
          <img
            style="width: 100px; height: 40px"
            :src="record.pictureUrl"
            alt=""
          />
        </template>
        <template #pictureType="{ record }">
          <div>{{ record.pictureType == 1 ? "首页" : "订单页" }}</div>
        </template>
        <template #operation="{ record }">
          <a-button
            type="link"
            @click="edit(record, '编辑')"
            v-has="{ a: $route, b: 2 }"
            >编辑</a-button
          >
          <a-button
            type="link"
            @click="edit(record, '查看')"
            v-has="{ a: $route, b: 1 }"
            >查看</a-button
          >
          <a-button
            type="link"
            danger
            @click="del(record.key)"
            v-has="{ a: $route, b: 2 }"
            >删除</a-button
          >
        </template>
      </a-table>
    </div>
    <!-- 弹窗 -->
    <a-modal
      v-if="visible"
      :visible="visible"
      :title="modalTitle"
      @cancel="closeModal('visible')"
      width="70%"
      :maskClosable="false"
    >
      <template v-slot:footer>
        <div class="d-j-around">
          <a-button @click="closeModal('visible')" class="d-a-center"
            >关闭</a-button
          >
          <a-button
            v-if="modalTitle != '查看'"
            type="primary"
            @click="addArticle"
            class="d-a-center"
            >确定</a-button
          >
        </div>
      </template>

      <a-form :model="form" :rules="rules" :labelCol="labelCol" ref="formRef">
        <a-form-item label="标题" name="title">
          <a-input
            placeholder="请输入标题"
            :disabled="modalTitle == '查看'"
            allow-clear
          ></a-input>
        </a-form-item>
        <a-form-item label="发布人" name="issuerType">
          <a-select
            ref="select"
            @focus="focus"
            @change="handleChange"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in publish"
              :value="item.id"
              :disabled="modalTitle == '查看'"
              :key="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-col :span="12">
          <a-form-item label="列表图" name="titleImgPath">
            <a-upload
              v-model:file-list="titleImgPath"
              list-type="picture-card"
              class="avatar-uploader"
              :maxCount="1"
              :customRequest="uploadDetail_image"
              :disabled="modalTitle == '查看'"
            >
              <div class="ant-upload-text">
                <plus-outlined />
              </div>
            </a-upload>
            文件大小不能超过100kb
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="内容图" name="contentImg">
            <a-upload
              v-model:file-list="contentImg"
              list-type="picture-card"
              class="avatar-uploader"
              :maxCount="7"
              :customRequest="uploadDetail_imgPath"
              :disabled="modalTitle == '查看'"
            >
              <div class="ant-upload-text">
                <plus-outlined />
              </div>
            </a-upload>
            文件大小不能超过100kb
          </a-form-item>
        </a-col>
        <a-col :span="18">
          <a-form-item label="内容" name="content">
            <a-textarea
              :rows="4"
              placeholder="请输入内容"
              :disabled="modalTitle == '查看'"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="是否置顶" name="top">
            <a-switch :disabled="modalTitle == '查看'" />
          </a-form-item>
        </a-col>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { reactive, ref, computed, toRefs } from "vue";
import { swiperType, swiperType1 } from "@/utils/dict.js";

import * as api from "@/api/content/swiper.js";

export default {
  setup() {
    const searchRef = ref("");
    const formRef = ref("");

    const data = reactive({
      list: [],
      serviceAct: 0,
      searchForm: {},
      loading: true,
      visible: false,
      swiperTypes: [...swiperType],
      swiperTypes1: [...swiperType1],
    });
    // 分页器
    const page = reactive({
      pageNum: 1,
      pageSize: 10,
      total: 0,
    });
    const serviceColums = [
      {
        title: "类型",
        dataIndex: "name",
        className: "table",
        align: "center",
        slots: {
          customRender: "service",
        },
      },
    ];
    const serviceList = [
      { name: "行业发展" },
      { name: "护理知识" },
      { name: "专业课程" },
      { name: "平台活动" },
    ];
    const columns = [
      {
        title: "编号",
        dataIndex: "id",
        className: "table",
      },
      {
        title: "标题",
        dataIndex: "pictureName",
        className: "table",
        width: 300,
      },
      {
        title: "发布人",
        dataIndex: "portType",
        className: "table",
        width: 80,
      },
      {
        title: "排序",
        dataIndex: "sortId",
        className: "table",
      },
      {
        title: "发布时间",
        dataIndex: "createdAt",
        className: "table",
      },

      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        slots: {
          customRender: "operation",
        },
      },
    ];
    // 分页器
    const pagination = computed(() => ({
      current: page.pageNum,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true,
    }));
    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      page.pageNum = pagination.current;
      page.pageSize = pagination.pageSize;
      // 请求列表接口
      init();
    };
    //父表格联动切换
    const getChildrenList = (record, index) => {
      data.serviceAct = index;
      data.searchForm = {};
      // portType:0所有/1护士/2用户
      //  index==1 表示父级为护士端
      data.searchForm.portType = index == 1 ? 1 : 2;
      // debugger;
      (data.swiperTypes = index == 1 ? [...swiperType1] : [...swiperType]),
        init();
    };
    const modalTitle = ref("新增");
    //编辑
    const edit = async (item, name = "编辑") => {
      console.log(item, "item");
      data.form = item;
      modalTitle.value = name;
      // if (item.contentImg.length > 0) {
      //   data.contentImg = item.contentImg.map((m, index) => {
      //     return {
      //       url: m,
      //       name: "1" + index + ".jpeg",
      //       status: "done",
      //     };
      //   });
      // }
      data.titleImgPath = [{ url: item.titleImgPath, status: "done" }];
      data.visible = true;
    };
    //新增
    const add = () => {
      console.log(1);
      // modalTitle.value = "新增";
      data.form = { content: "" };
      data.contentImg = [];
      data.titleImgPath = [];
      data.visible = true;
      data.editor = "";
      // setTimeout(() => {
      //   initEditor();
      // }, 500);
    };
    //列表数据
    async function init() {
      let obj = {
        pageNum: page.pageNum,
        pageSize: page.pageSize,
        ...data.searchForm,
      };
      let res = await api.list(obj);
      if (res.success) {
        let {
          object: { object },
        } = res;
        object.records.map((el) => (el.key = el.id));
        data.list = object.records;
        console.log(object.records);
        data.loading = false;
        page.total = object.total;
      }
    }
    init();

    return {
      ...toRefs(data),
      searchRef,
      formRef,
      columns,
      pagination,
      handleTableChange,
      serviceColums,
      serviceList,
      add,
      edit,
      modalTitle,
      getChildrenList,
    };
  },

  components: {},
};
</script>

<style scoped lang="less">
.act {
  color: #2a9d8f;
}
.name-act {
  color: #2a9d8f;
  font-weight: bolder;
}
</style>